<script setup lang="ts">
import { ref } from "vue"
import { useUserStore } from "../store/index"
import { ElMessageBox, ElMessage } from "element-plus"
import { onMounted, onUnmounted } from "vue"
import apiImage from "../assets/api.png"
import winIdImage from "../assets/win_id.png"
const userStore = useUserStore()
const userInfo = ref(userStore.getUserInfo)
const appVersion = ref(import.meta.env.VITE_APP_VERSION)
// 监听来自主进程的缓存清理消息
onMounted(() => {
  if (window.ipcRenderer) {
    window.ipcRenderer.on("cache-cleared", (_event, data) => {
      if (data.success) {
        ElMessage.success(data.message)
      } else {
        ElMessage.error(data.message)
      }
    })
  }
})

onUnmounted(() => {
  // 在组件卸载时移除事件监听，防止内存泄漏
  if (window.ipcRenderer) {
    window.ipcRenderer.removeAllListeners("cache-cleared")
  }
})

const logout = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await userStore.logout(true)
    })
    .catch(() => {
      // 用户取消操作
    })
}

// 清理本地缓存
const clearCache = () => {
  ElMessageBox.confirm("确定要清理应用数据缓存吗？这将清除包括任务间隔记录等数据，但不会影响浏览器缓存。", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      try {
        // 如果在Electron环境中，通过IPC清理应用缓存
        if (window.ipcRenderer) {
          window.ipcRenderer.send("clear-cache")
        }
        ElMessage.success("正在清理缓存...")
      } catch (error) {
        console.error("清理缓存失败:", error)
        ElMessage.error("清理缓存失败")
      }
    })
    .catch(() => {
      // 用户取消操作
    })
}

// 操作指引对话框
const guideDialogVisible = ref(false)

// 显示操作指引
const showGuide = () => {
  guideDialogVisible.value = true
}
</script>

<template>
  <div>
    <header class="app-header">
      <div class="nickName">欢迎！{{ userInfo.user?.nickname || "用户" }}</div>
      <div class="user-actions">
        <el-button class="guide-btn" type="primary" size="small" @click="showGuide">操作指引 - {{ appVersion }}</el-button>
        <el-button class="cache-btn" type="info" size="small" @click="clearCache">清理缓存</el-button>
        <el-button type="primary" size="small" @click="logout">退出登录</el-button>
      </div>
    </header>

    <!-- 操作指引对话框 -->
    <el-dialog v-model="guideDialogVisible" title="操作指引" width="600px" :close-on-click-modal="false" :show-close="true">
      <div class="guide-content">
        <el-steps direction="vertical" :active="5" process-status="process" class="custom-steps">
          <el-step>
            <template #title>
              <span class="step-title">第一步</span>
            </template>
            <template #description>
              <div class="step-description">从ads中的api选项中获取api地址填入指纹接口地址中并保存</div>
              <el-image style="width: 100px; height: 100px" :src="apiImage" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[apiImage,winIdImage]" show-progress :initial-index="0" fit="cover" />
            </template>
          </el-step>

          <el-step>
            <template #title>
              <span class="step-title">第二步</span>
            </template>
            <template #description>
              <div class="step-description">复制ads指纹浏览器中的窗口id进行新增窗口</div>
              <el-image style="width: 100px; height: 100px" :src="winIdImage" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[apiImage,winIdImage]" show-progress :initial-index="1" fit="cover" />
            </template>
          </el-step>

          <el-step>
            <template #title>
              <span class="step-title">第三步</span>
            </template>
            <template #description>
              <div class="step-description">勾选对应窗口进行绑定账号</div>
            </template>
          </el-step>

          <el-step>
            <template #title>
              <span class="step-title">第四步</span>
            </template>
            <template #description>
              <div class="step-description">在YingAI管理后台配置人设、业务策略、运行时间段</div>
            </template>
          </el-step>

          <el-step>
            <template #title>
              <span class="step-title">第五步</span>
            </template>
            <template #description>
              <div class="step-description">勾选要执行的窗口，开始执行</div>
            </template>
          </el-step>
        </el-steps>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="guideDialogVisible = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .logo {
    font-size: 18px;
    font-weight: bold;
    color: #1890ff;
  }

  .nav {
    display: flex;
    gap: 20px;

    .nav-item {
      cursor: pointer;
      padding: 0 12px;
      color: #333;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .user-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .guide-btn {
      // 移除自定义颜色样式，使用默认的primary颜色
    }

    .cache-btn {
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
    }
  }
}

.guide-content {
  margin: 10px 0;
  padding: 10px;
  max-height: 500px;
  overflow-y: auto;

  .step-title {
    font-weight: bold;
    font-size: 16px;
  }

  .step-description {
    margin-top: 5px;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
  }
}

:deep(.el-step__description) {
  padding-bottom: 15px;
}

:deep(.el-step__main) {
  white-space: normal;
}

:deep(.el-step) {
  overflow: visible;
}

/* 自定义步骤条颜色，使用primary颜色 */
:deep(.custom-steps) {
  .el-step__head.is-process,
  .el-step__head.is-finish {
    color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }

  .el-step__head.is-finish .el-step__line {
    background-color: var(--el-color-primary);
  }

  .el-step__title.is-process,
  .el-step__title.is-finish {
    color: var(--el-color-primary);
  }

  .el-step__icon.is-text.is-finish {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
